<template>
  <div>
    <div v-if="!isLogin" class="text-xs icon-hover" @click="setIsShowLogin(true)">登录</div>
    <div v-else class="">
      <el-dropdown>
        <span class="flex items-center pl-1 pr-1">
          <el-avatar class="icon-hover" :size="30" :src="userInfo.profile.avatarUrl || ''" />
          <span class="text-xs pl-2 text-slate-400 icon-hover">{{ userInfo.profile.nickname }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="userLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <Login />
  </div>
</template>

<script lang="ts" setup>
import Login from '@/components/login/Login.vue'
import { toRefs } from 'vue'
import { useUserStore } from '@/stores/user'
const { setIsShowLogin, isLogin, userInfo, userLogout } = toRefs(useUserStore())
</script>

<style lang="less" scoped></style>
